<template>
	<view>
		<!--轮播图-->
		<view class='re-swiper'>
			<u-swiper
				:list="swiperList"
				indicator
				indicatorMode="line"
				circular
				height='308rpx'
			></u-swiper>
		</view>
		<!--新上好课-->
		<view class='re-new'>
			<view class='new-title'>
				<view class='new-title-name'>新上好课</view>
				<view class='new-title-more'>查看更多</view>
			</view>
			<view class='new-list'>
				<view 
					class='new-list-item'
					v-for='item in newList'
					:key='item.id'
				>
					<view class='new-item-img'>
						<image :src="item.courseCover"></image>
					</view>
					<view class='new-item-main'>
						<view class='new-item-title'>{{ item.courseName }}</view>
						<view class='new-item-type'>{{ item.courseLevel }}</view>
						<view class='new-item-total'>
							<view class='new-item-price'>
								<view>限时优惠</view>
								<view class='new-item-discountPrice'>¥ {{ item.discountPrice }}</view>
							</view>
							<view class='new-item-number'>{{ item.clicks }}人学习</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--推荐好课-->
		<view class='recommend'>
			<view class='new-title recommend-title'>
				<view class='new-title-name'>推荐好课</view>
				<view class='new-title-more'>查看更多</view>
			</view>
			<view>
				<scroll-view scroll-x="true" class='nav-bar'>
					<view class='nav-bar-wrap'>
						<block v-for='item in reList' :key='item.id'>
							<view class='nav-bar-item'>
								<view class='nav-bar-item-img'>
									<image :src="item.courseCover"></image>
								</view>
								<view class='nav-bar-item-main'>
									<view class='nav-bar-item-type'>中级 · 87人报名</view>
									<view class='nav-bar-item-price'>
										<view class='nav-bar-item-oprice'>¥3688.00</view>
										<view class='nav-bar-item-pprice'>¥3988.00</view>
									</view>
									<view class='nav-bar-item-pricetxt'>限时优惠</view>
								</view>
							</view>
						</block>
					</view>
				</scroll-view>
			</view>
		</view>
		<!--大家都在看-->
		<view class='re-lo'>
			<view class='new-title'>
				<view class='new-title-name'>大家都在看</view>
			</view>
			<view class='new-list'>
				<view 
					class='new-list-item'
					v-for='item in courseList'
					:key='item.id'
				>
					<view class='new-item-img'>
						<image :src="item.courseCover"></image>
					</view>
					<view class='new-item-main'>
						<view class='new-item-title'>{{ item.courseName }}</view>
						<view class='new-item-type'>{{ item.courseLevel }}</view>
						<view class='new-item-total'>
							<view class='new-item-price'>
								<view>限时优惠</view>
								<view class='new-item-discountPrice'>¥ {{ item.discountPrice }}</view>
							</view>
							<view class='new-item-number'>{{ item.clicks }}人学习</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getSliders  } from '@/api/home.js'
import { mostNew , mostHeat , searchCourse } from '@/api/course.js'
export default{
	data () {
		return {
			swiperList:[],
			newList:[],
			reList:[],
			courseList:[]
		}
	},
	mounted(){
		//查询轮播图
		getSliders().then(res=>{
			this.swiperList = res.list.map(v=>v.imageUrl);
		})
		//查询新上好课
		mostNew({
			pageNum:1,
			pageSize:3
		}).then(res=>{
			this.newList = res.pageInfo.list;
		})
		//查询推荐课程
		mostHeat({
			pageNum:1,
			pageSize:6
		}).then(res=>{
			this.reList = res.pageInfo.list;
		})
		//查询课程
		searchCourse({
			pageNum:1,
			pageSize:3,
			entity:{
				sortBy:"clicks-desc"
			}
		}).then(res=>{
			this.courseList = res.pageInfo.list;
		})
	}
}
</script>

<style>
.re-swiper{
	padding:14rpx;
}
/deep/ .u-swiper__indicator{
	right:20rpx;
}
.re-new{
	padding:14rpx;
}
.new-title{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top:40rpx;
}
.new-title-name{
	font-size: 40rpx;
	font-weight: 400;
	color: #333333;
}
.new-title-more{
	font-size: 26rpx;
	font-weight: 400;
	color: #A0A4AD;
}
.new-list-item{
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top:40rpx;
}
.new-list-item:after{
	content: '';
	position: absolute;
	bottom:-20rpx;
	margin-top:40rpx;
	width: 100%;
	border-bottom: 1px solid #000000;
	opacity: 0.15;
}
.new-item-img{
	width: 237rpx;
	height: 186rpx;
	border-radius: 12rpx;
	background-color: #ccc;
}
.new-item-img image{
	width: 100%;
	height: 100%;
	border-radius: 12rpx;
}
.new-item-main{
	flex:1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 186rpx;
	padding-left:23rpx;
}
.new-item-title{
	font-size: 29rpx;
	font-weight: 400;
	color: #191919;
}
.new-item-type{
	font-size: 24rpx;
	font-weight: 400;
	color: #C5C5C5;
}
.new-item-total{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.new-item-price{
	display: flex;
	font-size: 21rpx;
	color: #FF4B5C;
	font-weight: 600;
}
.new-item-number{
	font-size: 21rpx;
	font-weight: 400;
	color: #A0A4AD;
}
.new-item-discountPrice{
	padding-left:21rpx;
}
.recommend{
	padding-top:40rpx;
}
.recommend-title{
	padding:14rpx;
}
/deep/ ::-webkit-scrollbar {
	display: block;
	width: 0px !important;
	height: 0px !important;
}
.nav-bar-wrap{
	
	display: flex;
	flex-flow: column wrap;
	height: 634rpx;
}
.nav-bar-item{
	width: 265rpx;
	height: 286rpx;
	margin-top:28rpx;
	margin-left:17rpx;
	background: rgba(255,255,255,0.39);
	box-shadow: 1px 3px 3px rgba(27,39,94,0.1);
	border-radius: 12rpx;
}
.nav-bar-item-img{
	width: 265rpx;
	height: 160rpx;
	border-radius: 12rpx;
	background-color: red;
}
.nav-bar-item-img image{
	width: 100%;
	height: 100%;
	border-radius: 12rpx;
}
.nav-bar-item-main{
	padding:12rpx;
}
.nav-bar-item-price{
	display: flex;
	padding:4rpx 0;
}
.nav-bar-item-oprice{
	font-size: 22rpx;
	font-weight: 500;
	color: #FF0018;
}
.nav-bar-item-pprice{
	padding-left:10rpx;
	font-size: 18rpx;
	color: #B3B3B3;
}
.nav-bar-item-type{
	font-size: 21rpx;
	color: #7B7B7B;
}
.nav-bar-item-pricetxt{
	font-size: 19rpx;
	color: #FF6464;
}
.re-lo{
	padding:14rpx;
}
</style>